<template>
    <div id="adminList">
        <el-row type="flex" :gutter="20" justify="start">
            <el-col :span="1.5">
                <el-button size="mini" type="primary" @click="handleSave">新增</el-button>
            </el-col>
            <el-col :span="2">
                <el-button size="mini" type="danger" @click="handleDelByIds(selectedIds)">批量删除</el-button>
            </el-col>
            <el-col :span="8">
                <el-input v-model="search.name" size="mini" placeholder="输入管理员姓名搜索"
                    @keyup.enter.native="handleSearch()" />
            </el-col>
            <el-col :span="2">
                <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </el-col>

        </el-row>
        <el-table :data="tableData" style="width: 100%" @selection-change="changeRows"
            :row-class-name="tableRowClassName" rowKey="adminId" ref="adminTable">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column label="管理员姓名" prop="adminName">
            </el-table-column>
            <el-table-column label="邮箱地址" prop="adminEmail">
            </el-table-column>
            <el-table-column label="电话号码" prop="adminPhone">
            </el-table-column>
            <el-table-column label="性别">
                <template slot-scope="scope">
                    <el-tag type="primary" effect="dark" v-if="(scope.row.adminSex === 0)">男</el-tag>
                    <el-tag type="warning" effect="dark" v-else>女</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
            :current-page.sync="search.page" :page-size="search.pageSize" :page-sizes="pageSizes"
            layout="->,prev, pager, next,sizes, jumper,total" :total="total">
        </el-pagination>
        <add :visible="showEditor" @close="changeAdd" :type="typeEditor" :formData="formData"></add>
    </div>
</template>
<script >
// import { test } from '@/api';
import { page, removeByIds } from '@/api/adminApi';
import add from '@/components/backend/admin/add.vue'
const options = {
    data() {
        return {
            // columns: [
            //     { colName: "adminId", label: "管理员Id" },
            //     { colName: "adminName", label: "管理员姓名" },
            //     { colName: "adminEmail", label: "邮箱地址" },
            //     { colName: "adminPhone", label: "电话号码" },
            //     { colName: "adminSex", label: "性别" }
            // ],
            //添加、编辑管理员
            showEditor: false,
            typeEditor: 0,//0 添加 else 修改
            formData: {},//要修改的管理员对象
            tableData: [],
            search: {
                page: 1,
                pageSize: 10,
                name: ''
            },
            total: 0,
            pageSizes: [10, 15, 20, 25],
            selectedIds: ""

        }
    },
    components: {
        add
    },
    created() {
        this.init();

    },
    methods: {
        init() {
            this.getPageInfo();
        },
        changeRows(rows) {
            // console.log(val);
            let ids = []
            rows.forEach(row => {
                ids.push(row.adminId);
            });
            this.selectedIds = ids.join();
            // console.log(ids.join());
        },
        changeAdd() {
            this.showEditor = !this.showEditor;
        },
        getPageInfo() {
            const that = this;
            page(this.search).then((resp) => {
                that.tableData = resp.data.data.records;
                that.total = resp.data.data.total;
            }).catch(err => {
                console.log(err);
            })
        },
        tableRowClassName({ rowIndex }) {
            if (rowIndex % 2 === 1) {
                return 'success-row';
            }
            return ''
        },
        handleSizeChange(val) {
            //页大小改变
            this.search.page = 1;
            this.search.pageSize = val;
            this.getPageInfo();
        },
        handleCurrentChange(val) {
            //当前页改变
            this.search.page = val;
            this.getPageInfo();

        },
        handleEdit(index, row) {
            // console.log(row);
            this.formData = row;
            this.typeEditor = 1;
            this.showEditor = true;
        },
        handleDelete(index, row) {
            let that = this;
            this.$confirm(`确认删除此管理员？: ${row.adminName}`, "删除管理员", "error")
                .then(() => {
                    //调用删除函数
                    that.deleteByIds(row.adminId);
                })
                .catch(() => { });
            console.log(index, row);
        },
        handleSearch() {
            this.getPageInfo();
        },
        handleSave() {
            this.typeEditor = 0;
            this.showEditor = true;
        },
        handleDelByIds(ids) {
            this.$confirm("确认批量删除管理员？", "批量删除")
                .then(() => {
                    this.deleteByIds(ids);
                }).catch(() => { })
        },
        deleteByIds(ids) {
            removeByIds(ids).then(resp => {
                if (resp.data.code === 1) {
                    this.$message.success("删除管理员成功");
                } else {
                    this.$message.error("删除管理员失败");
                }
            })
            this.getPageInfo();
        }
    }
}
export default options;
</script>

<style>
.el-table .success-row {
    background: #f0f9eb;
}
</style>